<template>
  <div>
    <CategorySelector :isCheckInput="!isShowAttrList"></CategorySelector>
    <el-card>
      <div v-if="isShowAttrList">
        <el-button
          type="primary"
          :icon="Plus"
          :disabled="!categoryList.category3Id"
          @click="toSaveAttrValue"
          style="margin-bottom: 10px"
          >添加数据</el-button
        >
        <el-table :data="attrList" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="attrName" label="属性名称" />
          <el-table-column label="属性值列表">
            <template v-slot="{ row }">
              <el-tag
                v-for="attrValue in row.attrValueList"
                :key="attrValue.id"
                style="margin-right: 8px"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-button
                size="small"
                type="warning"
                :icon="Edit"
                title="编辑"
                @click="toEditAttr(row)"
              />
              <el-popconfirm
                title="确定要删除此条属性吗?"
                @confirm="confirmDeleteAttr(row.id)"
              >
                <template #reference>
                  <el-button
                    size="small"
                    type="danger"
                    :icon="Delete"
                    title="删除"
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form style="width: 300px">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="Plus"
              :disabled="!attrInfo.attrName"
              @click="addAttrValue"
              >添加属性值</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          border
          :data="attrInfo.attrValueList"
          style="margin-bottom: 8px"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          />
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input
                ref="inputRef"
                v-if="row.isShowInput"
                v-model="row.valueName"
                @blur="deleteCurrentRow(row, $index)"
                @keydown.enter="deleteCurrentRow(row, $index)"
              />
              <span
                v-else
                @dblclick="toEditAttrValue(row)"
                style="display: inline-block; width: 100%"
              >
                {{ row.valueName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-popconfirm
                title="确定要删除此条属性吗?"
                @confirm="confirmDeleteAttrValue(row, $index)"
              >
                <template #reference>
                  <el-button
                    size="small"
                    type="danger"
                    :icon="Delete"
                    title="删除"
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          :disabled="!attrInfo.attrValueList.length"
          @click="saveAttrInfo"
          >保存</el-button
        >
        <el-button @click="isShowAttrList = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector"
export default {
  name: "Attr",
  components: { CategorySelector },
}
</script>

<script lang="ts" setup>
import { watch, ref, reactive, nextTick } from "vue"
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { useCategoryListStore } from "@/stores/categoryList"
import {
  reqGetAttrListData,
  reqDeleteAttrApi,
  reqAddOrUpdateAttrApi,
} from "@/api/product/attr"
import type {
  AttrListModel,
  AttrInfoModel,
  AttrValueModel,
} from "@/api/product/model/attrModel"

// 创建store对象
const categoryList = useCategoryListStore()
// 创建数组，缓存接口函数返回的 要渲染的数据
const attrList = ref<AttrListModel>([])
// 渲染表格与添加数据页面切换 变量
const isShowAttrList = ref<boolean>(true)

// 定义一个添加属性时的属性对象
const attrInfo = reactive<AttrInfoModel>({
  attrName: "", //要添加的属性名
  attrValueList: [], //要添加的具体属性值 是一个数组
  categoryId: -1, //三级分类的Id
  categoryLevel: 3, // 分类的等级 当前就设置一个3即可
})

// 定义一个变量 为对应输入框 以便用于获取输入框对象
const inputRef = ref<HTMLInputElement>()

// 1. 封装获取属性列表的函数  此函数 增加属性 删除属性 获取属性等等都会用到
const getAttrListData = async () => {
  attrList.value = await reqGetAttrListData(categoryList)
}

// 2. 监听三级导航ID的变化 发而发送请求获取列表数据
watch(
  () => categoryList.category3Id,
  category3Id => {
    // 如果category3Id为 undefined时 return
    if (!category3Id) return
    // 调用方法，获取属性列表
    getAttrListData()
  },
  { immediate: true }
)

// 3. 删除单向属性
const confirmDeleteAttr = async (id: number) => {
  // 调用删除的接口函数
  await reqDeleteAttrApi(id)
  // 删除成功信息提示
  ElMessage.success("该数据删除成功")
  // 重新获取数据
  getAttrListData()
}

// 4. 添加属性值
function addAttrValue() {
  attrInfo.attrValueList.push({
    valueName: "", //要添加的具体的属性值
    attrId: 0, //更新的时候才会用到 这一项当前来说可以不写
    isShowInput: true, //是不是显示输入框  或是显示span标签
  })
  // 自动获取焦点
  nextTick(() => {
    inputRef.value?.focus()
  })
}
// 5.失去焦点是，如果没有添加数据 则删除当前项，如果有数据 则保存，并改为span标签
const deleteCurrentRow = (row: AttrValueModel, index: number) => {
  // 5.1 判断一下当前输入框中是否有值 如果没有值 则删除当前行
  if (!row.valueName) return attrInfo.attrValueList.splice(index, 1)
  row.isShowInput = false
}

// 6. span标签双击时，编辑此项的数据
const toEditAttrValue = (row: AttrValueModel) => {
  row.isShowInput = true
  // 自动获取焦点
  nextTick(() => {
    inputRef.value?.focus()
  })
}

// 7.删除 属性值 attrInfo.attrValueList.valueName
const confirmDeleteAttrValue = (row: AttrValueModel, index: number) => {
  // 删除当前行
  attrInfo.attrValueList.splice(index, 1)
  // 删除成功信息提示
  ElMessage.success("该数据删除成功")
  row.isShowInput = false
}

// 8. 添加属性值时，清空原来的旧值
const toSaveAttrValue = () => {
  isShowAttrList.value = false

  // 清空attrInfo中的数据项
  attrInfo.attrName = ""
  attrInfo.attrValueList = []

  // 清空之前的id 以便保证是正常的添加属性操作
  delete attrInfo.id
}

// 9. 添加属性  或是更新属性，也是执行的这个事件处理程序
const saveAttrInfo = async () => {
  // 在传入数据之前，先指定要添加的三级分类
  attrInfo.categoryId = categoryList.category3Id
  // 调用接口函数
  await reqAddOrUpdateAttrApi(attrInfo)
  ElMessage.success("数据操作成功")
  isShowAttrList.value = true
  // 重新获取数据
  getAttrListData()
}

// 10. 编辑属性之数据回显
const toEditAttr = (row: AttrValueModel) => {
  isShowAttrList.value = false
  console.log(row)
  Object.assign(attrInfo, row)
}
</script>

<style></style>
